<template>
  <div>
    <el-row style="padding: 0 10px 30px;text-align: right;">
      <el-col :span="24">
        <el-radio-group v-model="time" @change="timeChange">
          <el-radio-button label="30分钟"></el-radio-button>
          <el-radio-button label="1小时"></el-radio-button>
          <el-radio-button label="12小时"></el-radio-button>
          <el-radio-button label="1天"></el-radio-button>
          <el-radio-button label="1周"></el-radio-button>
          <el-radio-button label="1日"></el-radio-button>
        </el-radio-group>  
      </el-col>
    </el-row>
    <el-row type="flex" justify="center">
      <el-col ref="main" :span="20" style="height: 400px;">
      </el-col>
    </el-row>
    <el-row class="chart-history-data" type="flex" justify="center">
      <el-col :span="20">
        <el-table :data="chartData">
          <el-table-column prop="time" label="时间"></el-table-column>
          <el-table-column prop="appName" label="应用/集群/实例"></el-table-column>
          <el-table-column prop="index" label="指标值"></el-table-column>
          <el-table-column prop="alarm" label="告警"></el-table-column>
          <el-table-column prop="alarm" label="详情">
            <template scope="scope">
              <el-button type="text">查看</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>
    <el-row type="flex" justify="center">
      <el-col :span="20" style="text-align: right;">
        <el-pagination style="padding-right: 0;margin-top: 10px;"
          @current-change="chartsCurrentChange"
          :current-page.sync="currentPage"
          :page-size="10"
          layout="total, prev, pager, next"
          :total="10">
        </el-pagination>
      </el-col>
    </el-row>
  </div>
</template>
<script>
  import { RadioGroup, RadioButton, Row, Col, Table, TableColumn, Button, Pagination } from 'element-ui'
  export default {
    created () {
      console.log()
    },
    mounted () {
      this._initEchars()
      this._resizeEchars()
    },
    methods: {
      timeChange (v) {
        console.log(v)
      },
      chartsCurrentChange (v) {
        this.currentPage = v
      },
      _initEchars () {
        this.charts = echarts.init(this.$refs.main.$el)
        this.charts.setOption(this.chartsOptions)
      },
      _resizeEchars () {
        window.addEventListener('resize', () => {
          this.charts.resize()
        })
      }
    },
    data () {
      return {
        currentPage: 1,
        chartData: [
          {}
        ],
        time: '30分钟',
        charts: '',
        chartsOptions: {
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              show: true,
              type: 'cross',
              lineStyle: {
                type: 'dashed',
                width: 1
              }
            }
          },
          title: {
            text: `告警名称：Web平均响应时间    告警通道：Onduty`,
            subtext: `告警阈值：4000    最近告警：2017-12-30    时间：00:30`,
            textStyle: {
              fontSize: 12,
            },
            subtextStyle: {
              color: 'red'
            }
          },
          xAxis: {
            data: ['2', '2', '33', '444'],
            boundaryGap: false
          },
          yAxis: {
            boundaryGap: false
          },
          series: [
            {
              name: '阈值',
              type: 'line',
              data: [0, 10, 20, 30]
            }
          ]
        }
      }
    },
    components: {
      'el-radio-group': RadioGroup,
      'el-radio-button': RadioButton,
      'el-row': Row,
      'el-col': Col,
      'el-table': Table,
      'el-table-column': TableColumn,
      'el-button': Button,
      'el-pagination': Pagination
    }
  }
</script>
<style lang="scss" scoped>
  .chart-history-data {
    margin-top: 30px;
  }
</style>